<template>
    <div  class="list">
        <div class="data-list">
        <tabs>
            <tab v-for="index in 8" :title="'标签 ' + index" :key="index">
                <div class="site-list">
                    <ul v-for="{title} in info" :key="title">
                        <li>
                            <a @click="changeshow">{{title}}
                                <span class="drop"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                内容 {{ index }}
            </tab>
        </tabs>
        </div>

            <popup
                    v-model="show"
                    position="bottom"
                    :style="{ height: '20%'}"
            >
                <div class="page special" style="display: block;">
                    <div id="special-content" style="height: 313.8px;">

                        <div class="item-title">特色功能</div>
                        <div class="item-list">

                            <div class="item chosen" data-id="-1" data-type="service">全部</div>

                            <div class="item" data-id="3" data-type="service">可改签</div>

                            <div class="item" data-id="2" data-type="service">可退票</div>

                        </div>

                        <div class="item-title">特殊厅</div>
                        <div class="item-list">

                            <div class="item chosen" data-id="-1" data-type="hallType">全部</div>
                        </div>
                    </div>
                    <div id="special-btn">
                        <span class="btn" id="cancel-btn">重置</span>
                        <span class="btn" id="confirm-btn">确定</span>
                    </div>
                </div>
                <tree-select
                        :items="items"
                        :active-id.sync="activeId"
                        :main-active-index.sync="activeIndex"
                >

                </tree-select>
            </popup>
        </div>
</template>

<script>
    import { Tab, Tabs,Popup,TreeSelect } from 'vant';
    import BScroll from "@better-scroll/core";
    import Pullup from "@better-scroll/pull-up";
    import {getmovie} from '../api/index'
    BScroll.use(Pullup);

    export default {
        data() {
            return {
                active: 2,
                show:false,
                data:new Date(),
                info:[
                    {title:'全程'},
                    {title:'品牌'},
                    {title:'特色'}
                ],
                items:[
                    {text:'浙江省',children:[{text:'杭州'},{text:'苏州'}]},
                    {text:'江苏省',children:[{text:'南京'},{text:'无锡'}]},
                    {text:'山西省',children:[{text:'太原'},{text:'晋中'}]},
                ],
                cinemas:[],
                showDays:{},
                brand:[],
                activeId: 1,
                activeIndex: 0
            };
        },
        components:{
            Tab,
            Tabs,
            Popup,
            TreeSelect
        },
        methods:{
            changeshow:function(){
                this.show=true;
            }
        },
       async mounted() {
           const {cinemas,showDays} =await getmovie();
           this.showDays=showDays;
           console.log(this.showDays)
           this.cinemas=cinemas
        }
    }
</script>
<style lang="scss" scoped>
    .list{
        display: flex;
        flex-direction: column;
        width: 100%;
        .site-list{
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            border:1px solid #e8e8e8;
            height: 40px;
            background: #ffffff;
            ul{
                align-items: center;
                display: flex;
                justify-content: center;
                flex-direction: row;
                width: 100%;
                li{
                    flex: 1;
                    text-align: center;
                    a{
                        color:#777777;
                    }
                    a:hover{
                        color: #e54847;
                    }
                    .drop{
                        display: inline-block;
                        top: 18px;
                        width: 0;
                        height: 0;
                        margin-left: 4px;
                        border: 4px solid transparent;
                        border-top-color: #b0b0b0;
                    }
                    a:hover .drop{
                        border-bottom-color: #f03d37;
                        border-top-color: transparent;
                        top: 10px;
                    }
                }
            }
        }
    }
</style>